<template>
  <template v-if="registering">
    <section
      class="relative h-12 text-white flex justify-center items-center bg-red-400"
    >
      <div
        class="w-12 h-full absolute left-0 flex justify-center items-center text-xl"
        @click="toggleRegister"
      >
        <van-icon name="arrow-left" />
      </div>
      注册
    </section>
    <van-form @submit="useRegister">
      <van-cell-group inset>
        <van-field
          v-model="registerForm.username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="registerForm.password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="registerForm.name"
          name="name"
          placeholder="昵称"
          label="昵称"
          :rules="[{ required: true, message: '不支持空白名' }]"
        />
        <van-field
          v-model="registerForm.sign"
          auto-size
          row="3"
          type="textarea"
          name="sign"
          placeholder="先有鸡还是先有蛋，先有女还是先有男，成年人没空思考，小孩又想不出答案"
          label="自我介绍"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          block
          plain
          :color="themeVars.fieldLabelColor"
          native-type="submit"
          >注册用户</van-button
        >
      </div>
    </van-form>
  </template>
  <template v-else>
    <section class="root-container">
      <img
        src="https://young-1306090592.cos.ap-guangzhou.myqcloud.com/mental-app/default_avatar.jpg"
        alt="LOGIN_LOGO"
        class="login-logo"
        style="margin: 20px 0"
      />
      <van-config-provider :theme-vars="themeVars">
        <section class="login-container">
          <van-field
            v-model="loginForm.username"
            label="账号"
            border
            left-icon="user-o"
            placeholder="username"
          />
          <van-field
            v-model="loginForm.password"
            border
            label="密码"
            type="password"
            left-icon="lock"
            placeholder="password"
          />
          <van-button
            plain
            :color="themeVars.fieldLabelColor"
            block
            :loading="loginForm.loading"
            @click="userLogin"
            >登录</van-button
          >
          <footer @click="toggleRegister">新用户注册</footer>
        </section>
      </van-config-provider>

      <footer
        class="absolute bottom-0 w-screen h-16 bg-pink-50 text-xl text-gray-600 flex justify-center items-center"
      >
        安小姐心理
      </footer>
    </section>
  </template>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import { useUserStore } from '@/store/user'
import { register } from '@/api/login'
const router = useRouter()
const registering = ref(false)

const userStore = useUserStore()

const toggleRegister = () => {
  registering.value = !registering.value
}

const loginForm = reactive({
  username: '',
  password: '',
  loading: false,
})

const registerForm = reactive({
  username: '',
  password: '',
  name: '',
  sign: '',
  loading: false,
})

const useRegister = (value) => {
  Toast.loading({
    message: '注册中···',
    forbidClick: true,
  })
  register(value)
    .then((result) => {
      console.log(result)
      Toast.success({
        message: '注册成功',
      })
      registering.value = false
    })
    .catch((error) => {
      console.log('错误', error)
    })
}

const themeVars = ref({
  fieldLabelWidth: '40px',
  fieldLabelColor: '#ff636c',
  fieldInputTextColor: '#333',
})

const userLogin = async () => {
  loginForm.loading = true
  await userStore
    .useLogin(loginForm)
    .then((result) => {
      Toast({ message: '登录成功', mask: true })
      router.replace({ name: 'Home' })
    })
    .catch((error) => {
      Toast({
        message: '用户名或密码错误',
        mask: true,
      })
    })
    .finally(() => {
      loginForm.loading = false
    })
}
</script>

<style scoped>
.root-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(
    to top,
    #fff 10%,
    #f5e4de 40%,
    #eed2c9 70%,
    #ff969f
  );
  background-color: #eed2c9;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.root-container > .login-logo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #fff;
}

.root-container .login-container {
  width: 350px;
  height: 200px;
  display: flex;
  box-sizing: border-box;
  padding: 12px;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

.login-container > footer {
  height: 30px;
  box-sizing: border-box;
  padding: 10px 0;
  font-size: 14px;
  color: #666;
}

.root-container > .title {
  width: 100%;
  height: 150px;
  text-align: center;
  color: #fff;
  font-family: '幼圆', serif;
  text-shadow: 4px 4px 10px #333;
}
</style>
